<template>
  <div class="uploadimg">
    <div class="addimg" :style="{height:height+'px'}" @click="cropperBox" v-if="!pic">
      <i class="el-icon-plus"></i>
      <p>点击上传</p>
    </div>
    <div :class="widthNumber=='medium'?'viewerImgMedium':(widthNumber=='small'?'viewerImgSmall':'viewerImgMini')" v-else>
      <div class="checkimgBody">
        <viewerModle type="1" :imgSrc="pic" widthNumber="small"></viewerModle>
      </div>
      <p class="checkImgp mt-5" @click="cropperBox" v-if="picSrc">编辑图片</p>
    </div>
    <corpperModle :visible.sync="corppervisible"
             v-if="corppervisible" @imgAddBack="imgAddBack" :imgSize="sizeBox[page].sizeType"></corpperModle>
  </div>
</template>
<script>

export default {
  name: 'uploadImg',
  props: ['imgNumber', 'page', 'picSrc'],
  components: {
  },
  watch: {
    picSrc (val) {
      this.pic = this.picSrc
    }
  },
  data () {
    return {
      imgSize: 5,
      dialogImgVisible: false,
      corppervisible: false,
      imgsrcCheck: null,
      sizeBox: {
        'studentPic': {list: [295, 413], sizeType: 0}, // 学生头像一寸 295*413
        'studentParentsPic': {list: [295, 413], sizeType: 0}, // 学生家长头像一寸 295*413
        'teachingPic': {list: [200, 200], sizeType: 1},
        'foodPic': {list: [200, 200], sizeType: 1}, // 餐品添加
        'floorPic': {list: [200, 200], sizeType: 1},
        'adminPic':{list: [200, 200], sizeType: 1}
      },
      height: 0,
      pic: '',
      widthNumber: 'small'
    }
  },
  created () {
    // 机端比例尺寸内容，定义高度
    this.pic = this.picSrc
    if (this.sizeBox[this.page].list[0] > this.sizeBox[this.page].list[1]) {
      this.height = (160 / this.sizeBox[this.page].list[1]) * this.sizeBox[this.page].list[0]
    } else if (this.sizeBox[this.page].list[0] < this.sizeBox[this.page].list[1]) {
      this.height = (160 / this.sizeBox[this.page].list[0]) * this.sizeBox[this.page].list[1]
    } else {
      this.height = 160
    }
  },
  methods: {
    cropperBox () {
      this.corppervisible = true
    },
    imgAddBack (option) {
      this.pic = option
      this.$emit('getChildValue', option)
    },
    priviwe () {
      this.imgsrcCheck = this.pic
      this.dialogImgVisible = true
    }
  }
}
</script>
<style scoped>
.addimg {
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #eee;
  border-radius: 4px;
  border: 1px #ddd dashed;
  cursor: pointer;
}

.addimg p {
  font-size: 12px;
  text-align: center;
  padding: 10px 0;
}

.checkimgBody img {
  display: block;
}
.checkImgp{
  color:#578bcf ;
  font-size:12px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  padding:5px 0;
  line-height: 20px;
}
.checkimgBody{
  position: relative;
}

.checkimg-icon i{
  color:#fff
}
.viewerImgMini {
  width: 50px;
}
.viewerImgSmall{
  width: 130px;
}
.viewerImgMedium{
  width: 200px;
}
</style>

